<template>
    <div class="msgWrap">
        <div class="msgBody" ref="msgBody">
            <template v-for="item in dataSource">
                <el-row :key="item._id" v-if="item.sendId == myInfo.id" class="tar" :ref="item.time">
                    <el-col :span="18" :offset="6" class="items">
                        <div class="content">
                            <p class="times">{{ item.time | getTime}}</p>
                            <p class="inner" v-if="item.type == 'text'">{{ item.value }}</p>
                            <img draggable="false" viewer='true' v-lazy="$isRelativePath(item.value)" :onerror="errorImg" v-if="item.type == 'image'" class="imgs" @click.stop.prevent="toSeePics(item)" />
                            <div class="files" v-if="item.type == 'file'">
                                <div class="chat_file_icon">
                                    <img draggable="false" v-lazy="'static/image/home/document.png'"/>
                                </div>
                                <div class="chat_file_info">
                                    <div>{{item.value}}</div>
                                </div>
                            </div>
                        </div>
                        <div class="userinfos">
                            <img :src="userImg" alt="">
                        </div>
                    </el-col>
                </el-row>
                <el-row :key="item._id" v-else class="tal" :ref="item.time">
                    <el-col :span="18" class="items_r">
                        <div class="userinfos">
                            <img :src="userImg" alt="">
                            <p class="names">{{ item.name }}</p>
                        </div>
                        <div class="content">
                            <p class="times">{{ item.time | getTime }}</p>
                            <p class="inner" v-if="item.type == 'text'">{{ item.value }}</p>
                            <img draggable="false" viewer='true' v-lazy="$isRelativePath(item.value)" :onerror="errorImg" v-if="item.type == 'image'" class="imgs" />
                            <div style='display: flex;' v-if="item.type == 'file'">
                                <div class="chat_file_icon">
                                    <img draggable="false" v-lazy="'static/image/home/document.png'"/>
                                </div>
                                <div class="chat_file_info">
                                    <div>{{item.value}}</div>
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </template>
        </div>
        <span :class="['morebtn', !moreBtnUpShow ? 'disa' : '' ]" @click.stop.prevent="getMoreUp">上一页</span>
        <span :class="['morebtn', !moreBtnDownShow ? 'disa' : '' ]" @click.stop.prevent="getMoreDown">下一页</span>
    </div>
</template>
<script>
import userImg from '../../static/image/home/person_1.png'
export default {
    name: 'MessageRecord',
    props: {
        dataSource: {
            type: Array,
            default: []
        },
        myInfo: {
            type: Object,
            default: null
        },
        scrollTime: {
            type: String,
            default: ''
        },
        moreBtnDownShow: {
            type: Boolean,
            default: true
        },
        moreBtnUpShow: {
            type: Boolean,
            default: true
        }
    },
    data () {
        return {
            userImg,
            errorImg:'this.src="' + require('../../static/image/home/document.png') + '"',
            loadText: '加载更多',
            listData: []
        }
    },
    watch: {
        dataSource: {
            handler (newV, oldV) {
                this.$forceUpdate()
            },
            deep: true
        }
    },
    filters: {
        getTime(str) {
            let time = new Date(parseInt(str)) 
            let month = time.getMonth() + 1 >= 10 ? time.getMonth() + 1 : "0" + (time.getMonth() + 1);
            let day = time.getDate() >= 10 ? time.getDate() : "0" + time.getDate();
            let hours = time.getHours() >= 10 ? time.getHours() : '0' + time.getHours();
            let minutes = time.getMinutes() >= 10 ? time.getMinutes() : '0' + time.getMinutes();
            let seconds = time.getSeconds() >= 10 ? time.getSeconds() : '0' + time.getSeconds();
            return month + '月' + day + '日' + " " + hours + ':' + minutes + ':' + seconds;
        }
    },
    methods: {
        getMoreDown () {
            if(this.moreBtnDownShow) {
                this.$emit('getMoreMsgRecords')
            }
        },
        getMoreUp () {
            if(this.moreBtnUpShow) {
                this.$emit('getMoreMsgRecordsPre')
            }
        },
        // 点击图片下载
        toSeePics (item) {
            this.downloadImg(item)
        },
        // 根据漫游消息的图片id去服务器下载图片
        downloadImg (rValue) {
            let _this = this
            this.$downLoad("api/v1/oim/image/download.do",rValue.DownLoadId, (wt) => {
                let myID = _this.myInfo.id
                var fileReader = new FileReader();
                fileReader.onload = function(w) {
                    let suffix = rValue.value.split(".").splice(-1)[0];
                    let base64 = w.target.result.replace(/^data\:.{1,40}base64\,/gi, "")
                    let info = _this.$shell('SaveFileStream', [myID, base64,suffix])
                    info = JSON.parse(info)
                    if (info.return_code == "TRUE") {
                        Object.assign(rValue, {
                            value: info.return_msg
                        })
                        _this.$forceUpdate()
                        _this.operationalDatabase(`UPDATE private_list_${_this.myInfo.id} SET value = '${info.return_msg}', isDownLoad = '1'  WHERE messageId = '${rValue.messageId}';`);
                    }
                }
                fileReader.readAsDataURL(wt)
            }, (wt) => {
                console.log('error')
                console.log(wt)
            });
        },
        //index --->1为搜索,其他不需要参数
        operationalDatabase(statements, index) {
            let to = JSON.stringify({
                Sqlstr: statements
            })
            return arguments[1] ? JSON.parse(this.$shellSQL(to, index)) : JSON.parse(this.$shellSQL(to))
        },
    }
}
</script>
<style lang="less" scoped>
.msgWrap {
    width: 100%;
    padding: 20px;
    background-color: #F7F7F7;
    .msgBody {
        height: 360px;
        overflow-y: scroll;
        &::-webkit-scrollbar {
            width: 0;
        }
        .tar {
            text-align: right;
            padding: 10px 0;
            .items {
                display: flex;
                flex-direction: row;
                .userinfos {
                    width: 40px;
                    text-align: center;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    img {
                        width: 30px;
                    }
                }
                .content {
                    margin-right: 10px;
                    flex: 1;
                    .times {
                        font-size: 12px;
                    }
                    .inner {
                        background-color: #fff;
                        padding: 10px 5px;
                        border: 1px solid #EDEDED;
                        border-radius: 5px;
                    }
                    .imgs {
                        width: 220px;
                    }
                    .files {
                        display: flex;
                        font-size: 14px;
                        flex-direction: row;
                        align-items: center;
                        justify-content: flex-end;
                        .chat_file_icon {
                            img {
                                width: 40px;
                            }
                        }
                        .chat_file_info {
                            font-size: 14px;
                        }
                    }
                }
            }
        }
        .tal {
            text-align: left;
            padding: 10px 0;
            .items_r {
                display: flex;
                flex-direction: row;
                .userinfos {
                    text-align: center;
                    min-width: 60px;
                    img {
                        width: 30px;
                    }
                    .names {
                        font-size: 12px;
                    }
                }
                .content {
                    margin-left: 10px;
                    flex: 1;
                    .times {
                        font-size: 12px;
                    }
                    .inner {
                        background-color: #fff;
                        padding: 10px 5px;
                        border: 1px solid #EDEDED;
                        border-radius: 5px;
                    }
                    .imgs {
                        width: 220px;
                    }
                }
            }
        }
    }
    .morebtn {
        background-color: #fff;
        cursor: pointer;
        padding: 0 10px;
        &.disa {
            color: #ccc;
        }
    }
}
</style>